<!--
 * @Author: zww
 * @Date: 2021-08-04 09:35:53
 * @LastEditTime: 2021-08-04 15:24:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\13-左侧菜单\01-左侧导航目录.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2721498_aaqm74bwipp.css"> -->
    <title>Title</title>

    <style>
        .menuList {
            width: 200px;
            height: 100vh;
            background-color: #393d49;
            color: #eee;
            font-size: 15px;
            font-family: "楷体";
        }

        .title {
            height: 40px;
            line-height: 35px;
            /* text-algin缩进不一定是center时可以用text-indent */
            text-indent: 20px;
        }

        .title:hover {
            background-color: #2f4056;
        }

        .menu ul {
            background-color: #000;
        }

        .menu ul li {
            height: 30px;
            line-height: 35px;
            text-indent: 20px;
            cursor: pointer;
        }

        .menu ul li.active {
            background-color: #009688;
        }

        .title i {
            font-size: 15px;
            color: #eee;
            z-index: 999;
        }

        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .slide-fade-enter-active {
            transition: all .8s ease;
        }

        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="menuList">
        <div class="menu" v-for="(item,i) in list">
            <div class="title" @click="item.show=!item.show">
                {{item.name}}
                <!-- <i class="iconfont icon-topbrow"></i> -->
            </div>
            <transition name="slide-fade">
                <ul v-show="item.show">
                    <li v-for="(item1,j) in item.children" @click="activeParent=i,activeChildren=j"
                        :class="{active:activeParent===i&&activeChildren===j}">
                        {{item1.name}}
                    </li>
                </ul>
            </transition>
        </div>
    </div>
    <script>
        new Vue({
            el: '.menuList',
            data() {
                return {
                    // 高亮索引
                    activeTitleIndex: 0,
                    activeChildren: 0,
                    activeParent: 0,
                    list: [{
                            show: false,
                            icon: "",
                            name: "学生管理",
                            children: [{
                                    icon: "",
                                    name: "添加学生",
                                },
                                {
                                    icon: "",
                                    name: "查询学生",
                                },
                                {
                                    icon: "",
                                    name: "学生权限",
                                },
                            ],
                        },
                        {
                            show: false,
                            icon: "",
                            name: "员工管理",
                            children: [{
                                    icon: "",
                                    name: "添加员工",
                                },
                                {
                                    icon: "",
                                    name: "查询员工",
                                },
                                {
                                    icon: "",
                                    name: "员工权限",
                                },
                            ],
                        },
                        {
                            show: false,
                            icon: "",
                            name: "档案管理",
                            children: [{
                                    icon: "",
                                    name: "添加学生档案",
                                },
                                {
                                    icon: "",
                                    name: "查询学生档案",
                                },
                                {
                                    icon: "",
                                    name: "学生权限",
                                },
                            ],
                        },
                    ],
                };
            },
        });
    </script>
</body>

</html>